<template>
  <div class="slider">
    <!-- default-active	当前激活菜单的 index(使用mete来自定义属性)    unique-opened	是否只保持一个子菜单的展开    router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
    <el-menu
      :default-active="$route.meta.path"
      class="el-menu-vertical-demo"
      :class="$store.state.isShow ? 'el-menu--collapse' : ''"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
    >
      <!-- 遍历渲染 -->
      <el-submenu
        :index="index + ''"
        v-for="(item, index) in newMenu"
        :key="index"
      >
        <template slot="title">
          <i :class="addClass(index)"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group>
          <!-- 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
          <el-menu-item
            :index="subitem.path"
            v-for="(subitem, subidx) in item.sub"
            :key="subidx"
            >{{ subitem.title }}</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数组里面包含对象,方便以后拓展属性
      menu: [
        {
          title: "商品管理", //一级菜单
          sub: [
            { title: "商品列表", path: "/good" },
            { title: "商品分类", path: "/category" },
            { title: "品牌管理", path: "/brand" },
            { title: "商品属性管理", path: "/attribute" },
          ], // 二级菜单
        },
        {
          title: "订单中心",
          sub: [{ title: "订单列表", path: "/order" }], // 二级菜单
        },
        {
          title: "店铺运营",
          sub: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" },
          ], // 二级菜单
        },
      ],
      newMenu: [], //转换之后的数组
    };
  },
  methods: {
    // 图标类名
    addClass(index) {
      if (index == 0) {
        return "el-icon-location";
      } else if (index == 1) {
        return "el-icon-star-on";
      } else {
        return "el-icon-setting";
      }
    },
    handleOpen() {},
    handleClose() {},
  },
  created() {
    let menus = this.$store.state.menu;
    // 把vuex里面的权限列表(menu)转换为对象的形式(方便操作数据)
    let menuObj = menus.reduce((prev, current) => {
      // 预期数据格式   "/editgood": {id: 8, user_id: 1, path: "/editgood", path_name: "编辑商品"}
      prev[current.path] = current;
      return prev;
    }, {});

    // 循环完整个菜单的数组,生成当前用户菜单数组
    for (let i = 0; i < this.menu.length; i++) {
      let newSubs = [];
      for (let j = 0; j < this.menu[i].sub.length; j++) {
        let subsObj = this.menu[i].sub[j];
        if (menuObj[subsObj.path]) {
          newSubs.push(subsObj);
        }
      }
      // 得到预期数据
      //  { title: "", // 一级菜单
      //    sub: [ { title: "商品列表", path: "/good" },], // 二级菜单 },
      if (newSubs.length > 0) {
        this.newMenu.push({
          ...this.menu[i], // {title:'xxx',sub: []}
          sub: newSubs, // 重写上面的sub:[]
        });
      }
    }
    // console.table(this.newMenu);
  },
};
</script>

<style lang="less" scoped>
.slider {
  // width: 15%;
  // height: 88vh;
  // background-color: #545c64;
  // width: 250px;
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
  background-color: #545c64;
  // transition: right .6s ease-in-out;
  // transition: 2s;

  // 设置滚动条不显示
  &::-webkit-scrollbar {
    width: 0;
  }
  // ul {
  //   transition: left 0.3s ease-in-out;
  // }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
  }
}
</style>